<template>
  <div>
    <Header/>
    <div class="Breadcrumbs">
      <!-- <Breadcrumb /> -->
     <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button"  @click="$router.push('/early')">返回</el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item><span class="no-redirect">费用预警详情</span> </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <el-main>
       <p>{{list.btitle}}</p>
        <el-table class="top" :header-cell-style="{background:'#F3F8FE'}" :data="list.before" border style="width: 90%">
          <el-table-column prop="ans" align="center" label="专利号" >
          </el-table-column>
          <el-table-column prop="tic" align="center" label="专利名称" >
          </el-table-column>
          <el-table-column prop="type" align="center" label="年费类型">
          </el-table-column>
          <el-table-column prop="date" align="center"  label="缴纳截止日期">
          </el-table-column>
          <el-table-column prop="money" width="165" align="center" label="费用">
          </el-table-column>
        </el-table>

        <!-- <p>{{list.atitle}}</p>
        <el-table class="top" @row-click="rowClick" :header-cell-style="{background:'#F3F8FE'}" :data="list.after" border style="width: 90%">
          <el-table-column prop="ans" align="center" label="专利号" >
          </el-table-column>
          <el-table-column prop="tic" align="center" label="专利名称">
          </el-table-column>
          <el-table-column prop="type" align="center" label="年费类型">
          </el-table-column>
          <el-table-column prop="date" align="center"  label="缴纳截止日期">
          </el-table-column>
        </el-table> -->
      </el-main>
      <Service/>
    </div>
</template>

<script>
  import {CostShow} from '@/api'
  import Header from "@/components/Header"
  import Breadcrumb from '@/components/Breadcrumb'
  import Service from '@/components/Service'
  export default{
    components:{
      Header,
      Breadcrumb,
      Service
    },
    data(){
      return{
        list:[]
      }
    },
    mounted() {
      this.getdata();
    },
    methods:{
      async getdata(){
        try{
          const res = await CostShow({push_id:this.$route.query.id});
          this.list = res;
          // this.page = res.page;
        } catch(e){
          this.$message.error(e);
        }
      },
      rowClick(row, event, column){
        const pid = row.pid;
        const ano = row.ano;
        this.$router.push({path:"/detail",query:{"pid":pid}})
      },
    }
  }
</script>

<style scoped lang="less">
  .Breadcrumbs{
    margin-left:0 !important;
  }
  .top{
    margin:30px 0;
  }
</style>
